<template>
  <div class="hot">
    <div class="bg_box">
      <!-- <img src="../assets/hot_music_bg_2x.jpg" alt=""> -->
      <div>
        <div class="log_box"></div>
        <div class="time">更新日期：{{time}}</div>
      </div>
    </div>
    <div class="newset_box" v-for="(item, index) in hot" :key="index">
      <div class="newset_item">
        <!-- 歌曲序号 -->
        <div class="num" :style="`color:${item.color}`">
          {{(item.num > 9 ? item.num : '0' + item.num)}}
        </div>
        <!-- 左侧歌曲名&歌手 -->
        <div>
          <div class="song_name">{{ item.name }}</div>
          <div class="songs_auth"><i class="sq"></i>{{ item.ar[0].name }} -- {{ item.name }}</div>
        </div>
        <!-- 右侧播放按钮 -->
        <div @click="clickPlay(item)">
          <div v-show="item.isPlay" class="icon"></div>
          <img v-show="!item.isPlay" src="../assets/autoplay.gif" alt="">
        </div>
      </div>
    </div>
    <audio ref="audio"></audio>
    <div class="hotdn">
          <span>查看完整榜单</span>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Hot',
  // 页面初始数据
  data() {
    return {
      hot: [],
      songid: "",
      // 当天的时间
      time: ''
    }
  },
  // 页面逻辑(方法)
  methods: {
    // 获取最新音乐数据
    getHotSong() {
      // 通过axios 向后台接口拿数据
      this.axios({
        method: 'GET',
        url: "/playlist/detail",
        params:{
          id:3778678
        }
      }).then((result) => {
        // console.log(result);
        // console.log(result.data);
        // console.log(result.data.playlist.tracks);
        console.log("this.hot--",this.hot);
        // 遍历数据
        result.data.playlist.tracks.map((item,index) => {
          item.isPlay = true;
          // 添加序号
          item.num =index + 1;
          // console.log(item.num);
          // 添加颜色 给前三个添加
          if(index < 3){
            item.color = '#df3436'
          }
          return item;
        })
       // 处理数据
       this.hot = result.data.playlist.tracks.slice(0,20);
        console.log(this.hot);
      
      })
    },
    // 播放歌曲
    clickPlay(e) {
      // console.log(e);
      // 将所有的播放状态统一设置为暂停
      this.hot.map((item) => {
        item.isPlay = true;
        return item;
      })
      e.isPlay = !e.isPlay;
      console.log(e);

      // 获取页面上的audio标签
      var audio = this.$refs.audio

      // 判断是否点击相同的id
      if (this.songid == e.id) {
        // 控制音乐的状态
        if (audio.paused) {
          // 如果音乐是暂停的就继续播放
          audio.play()
          return;
        }
        // console.log("当前音乐正在播放");
        // 调用暂停的方法
        audio.pause();
        // 修改状态
        e.isPlay = !e.isPlay;
        return;
      }
      //  将播放id赋值回去
      this.songid = e.id
      //  将音乐地址赋值回去给audio
      audio.src = `https://music.163.com/song/media/outer/url?id=${this.songid}.mp3`
      // 播放
      audio.play();
    },
    getDate() {
      // 获取当天的时间
      var currentTime = new Date();
      // console.log(currentTime);
      // 拼接日期
      this.time = `${currentTime.getMonth() + 1}月${currentTime.getDate()}日`
    }
  },
  // 生命周期
  created() {
    this.getHotSong(),
    this.getDate()
  }

}
</script>
<style lang="less" scoped>
.hot {
  .bg_box {
    width: 100%;
    height: 146px;
    background: url('../assets/hot_music_bg_2x.jpg') no-repeat center center/cover;
    overflow: hidden;

    >div {
      padding: 0 0 0 20px;
      margin-top: 23px;

      .log_box {
        width: 142px;
        height: 67px;
        background: url('../assets/index_icon_2x.png') no-repeat;
        background-size: 166px 97px;
        background-position: -24px -30px;
      }

      .time {
        margin-top: 10px;
        color: hsla(0, 0%, 100%, .8);
        font-size: 12px;
      }
    }
  }

  .newset_box {
    padding: 0 5px;
    padding-bottom: 10px;

    .newset_item {
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;
      // margin-top: 2px;
      >.num {
        width: 40px;
        height: 100%;
        text-align: center;
        line-height: 56px;
        color: #999;
        font-size: 16px;
      }

      >div:nth-child(2) {
        // width: 90%;

        >div {
          // 多行文本溢出隐藏
          width: 280px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; // 省略号
        }

        .song_name {
          font-size: 16px;
          color: #333;
        }

        .songs_auth {
          color: #888;
          font-size: 12px;
          margin-top: 4px;
          
          
            .sq{
              display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
              background: url('../assets/index_icon_2x.png') no-repeat;
              background-size: 166px 97px;
              background-position: 0.48px 0;
            }
          
        }
      }

      >div:nth-child(3) {
        .icon {
          width: 32px;
          height: 32px;
          background-image: url('../assets/index_icon_2x.png');
          background-repeat: no-repeat;
          background-position: -18px 0;
          background-size: 166px 97px;
        }
        img {
          width: 32x;
          height: 32px;
          display: block;
        }
      }
    }
  }
  .hotdn{
    height: 55px;
    line-height: 55px;
    text-align: center;
    background-color: rgba(0,0,0,0);;
    >span{
      display: inline-block;
      font-size: 16px;
      color: #999;
      padding-right: 14px;
      background-image: url('../assets/icon_gt.png') no-repeat;
      background-size: 7px 12px;
    }
    
  }

}
</style>